<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/layer303/css/layui.css">
    <link rel="stylesheet" href="../css/base.css">
    <style type="text/css">
        *{
            margin:0;padding:0;
        }
        body{
            font-size:12px;
            color:#333;
            overflow: hidden;
        }

        #myform input{
            width: 260px;
            height: 36px;
            padding:5px;
            border:1px solid #dfdfdf;
        }

        #myform label{
            font-size:14px;
        }
        #myform dl{
            width:360px;
            text-align:left;
            padding: 10px 0;
            margin:0 auto;
        }

        #myform dl dt,#myform dl dd{

            display:inline-block;
        }
        #myform dl dt{

            width:100px;
        }
        #myform dl dt label{
            top: 3px;
            position: relative;
        }
        #myform dl dd{
        }
        .btn{
            width: 200px;
            height: 35px;
            border: 1px solid #e51b56;
            color: red;
            margin-left: 169px;
            /* margin-top: 183px; */
            display: block;
            background: #fff;
            margin-top: 10px;
        }
        .btn:hover{
            width:200px;height:35px;
            background:#e51b56;
            color:#fff;
            cursor: pointer;
        }

    </style>
    <script src="../lib/jquery-3.1.1.min.js"></script>
    <script src="../lib/layer303/layui.all.js"></script>
    <script src="../js/commonjs/common.js"></script>
</head>
<body style="width:100%;">
    <ul style="text-align:center;padding: 0 0 20px;">
        <dt style="font-size: 22px;
        font-weight: 500;">快速预约</dt>
        <dd>Online booking</dd>
    </ul>
    <form action=""id="myform">
        <dl class="og-clearfixed">
            <dt><label for="">姓名：</label></dt><dd><input id="name" type="text" placeholder="请输入您的姓名(必填)"autofocus="autofocus"></dd>
        </dl>
        <dl class="og-clearfixed">
            <dt><label for="">手机号：</label></dt><dd><input id="phone" type="tel" placeholder="请输入您的手机号(必填)"></dd>
        </dl>
        <dl id="code_box" class="og-clearfixed">
            <dt style="float: left;top:8px;"><label for="">验证码：</label></dt><dd class="og-clearfixed"><input id="code" type="text" placeholder="验证码(必填)" style="width:120px;float:left;"><img
               id="code_img" src="/validateCode/get" style="width:129px;height:35px;float:left;margin-left:10px;"/></dd>
        </dl>
        <button type="button" id="btn" class="btn" style="">立即预约</button>
    </form>

<div style="width:100%;position:absolute;bottom:10px;"><p style="text-align:center;">我们承诺：此预约不收取任何费用，若有收费行为请拨打：4000888186</p></div>
    <script>
        $("#code_img").click(function () {
            var  $this = $(this);
            var randomNum = 10+parseInt(Math.random()+5);
            $this.attr('src','/validateCode/get?newcode='+randomNum);
        })
    </script>
</body>
</html>